<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" top="10vh"  destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right" style="height:350px">
                    <el-row :gutter="1">
                        <el-col :span="12">
                            <el-form-item label="流程名称" prop="title">
                                <el-input v-model="form.title" placeholder="请输入流程名称" clearable style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="审批流类型" prop="check_type">
                        <el-select v-model="form.check_type"  filterable style="width: 100%" placeholder="请选择类型" clearable>
                            <el-option label="固定审批流" :value="1"/>
                            <el-option label="自由审批流" :value="2"/>
                        </el-select>
                    </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="审批流程" prop="flow_list">
                        <sc-form-table ref="table" v-model="form.flow_list" :addTemplate="addTemplate" placeholder="暂无数据" v-if="form.check_type==1">
                            <el-table-column prop="flow_type" label="注：固定流程当前步骤未查找到人员时自动跳转到下一步骤">
                                <template #default="scope">
                                    <el-select v-model="scope.row.flow_type" placeholder="请选择" style="width: 50%" clearable>
    									<el-option v-for="item in flow_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                    <el-select v-model="scope.row.flow_uids" placeholder="请选择" v-if="scope.row.flow_type==3" style="width: 50%" clearable filterable>
                                        <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <el-select v-model="scope.row.flow_uids" multiple placeholder="请选择" v-if="scope.row.flow_type==4 || scope.row.flow_type==5" style="width: 50%" clearable filterable>
                                        <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </sc-form-table>
                        <div v-else>无需配置审批人，审批时，根据实际情况选择审批人即可，自由度最高。</div>
                    </el-form-item>
                    <!-- <el-form-item label="抄送人" prop="copy_uids">
                        <el-select multiple v-model="form.copy_uids"  filterable style="width: 100%" placeholder="请选择抄送人" clearable>
                            <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="流程说明" prop="remark">
                        <el-input v-model="form.remark" placeholder="请输入流程说明" type="textarea" clearable style="width:100%"></el-input>
                    </el-form-item>
                    <el-form-item label="是否禁用" prop="system_disable">
                        <el-switch v-model="form.system_disable" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer>
                <div style="display: flex;justify-content: end;">
                    <el-button @click="visible = false">取 消</el-button>
                    <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
                </div>
            </el-footer>
        </el-container>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增审批流程',
				edit: '编辑审批流程',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				id: "",
				title: "",
				check_type: 1,
                copy_uids:"",
                remark:"",
                flow_list:[],
                system_disable: 0,
			},
            type:"",
            addTemplate:{
                flow_type:"",
            },
            flow_type:[
                {value:1,label:"当前部门负责人"},
                {value:2,label:"上一级部门负责人"},
                {value:3,label:"指定人员"},
                {value:4,label:"多人会签"},
                {value:5,label:"多人或签"},
            ],
            humList:[],
			//验证规则
			rules: {
                title: [
					{ required: true, message: '请输入流程名称' }
				],
                check_type: [
					{ required: true, message: '请选择' }
				],
            },
            show:''
		}
	},
	mounted() {
        this.getHum()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            this.form.flow_list.map(item=>{
                if(item.flow_uids){
                    item.flow_uids = item.flow_uids.toString()
                }
            })
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.setting.approval.edit.post(this.form);
					} else {
						res = await this.$API.setting.approval.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			this.form.id = data.id
            var res = await this.$API.setting.approval.detail.post({id:data.id});
			this.form.title = res.data.title
			this.form.check_type = res.data.check_type
            res.data.flow_list.forEach(item => {
                item.flow_type = Number(item.flow_type),
                item.flow_uids = item.flow_type==3?Number(item.flow_uids[0]):item.flow_uids.map(uid => parseInt(uid));
            });
            console.log('res.data.flow_list :>> ', res.data.flow_list);
            this.form.flow_list = res.data.flow_list
            this.form.remark = res.data.remark
            this.form.system_disable = res.data.system_disable
		},
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
        },
	}
}
</script>

<style>
    .title{
        margin: 20px;
        color: #01a066;
    }
</style>
